//导入模块
const gulp = require('gulp')
const uglify = require('gulp-uglify')    //压缩 去注释
const babel = require('gulp-babel')      //js兼容
const rev = require('gulp-rev')          //去缓存
const cssmin = require('gulp-minify-css')//压缩去注释
const imagemin = require('gulp-imagemin')//压缩图片
const minifyhtml = require('gulp-minify-html')//压缩HTML
const revCollector = require('gulp-rev-collector')//去缓存


//开发服务器配置  ==================================
const {createProxyMiddleware} = require('http-proxy-middleware')
const server = require('browser-sync').create();
const watch = require('gulp-watch');

gulp.task('serve', () => {
    server.init({
      // server:'./src',
      server: {
        baseDir: './src',
        middleware: [
         // 最终请求地址 = target + $.get/$.post/$.ajax url 
         // http://baidu.com + /api/sugrec?json=1&prod=pc&wd=htm&req=2&bs=html
         // ...
         createProxyMiddleware('/api', { 
            // 目标服务器网址
            // target: "https://baidu.com",
            target: "http://kg.zhaodashen.cn",
            changeOrigin: true, // 是否允许跨域
            secure: false,      // 关闭SSL证书验证https协议接口需要改成true
            pathRewrite: {      // 重写路径请求
                // 重写
                // '^/old/api' : '/new/api'
                // 移除
                '^/api' : ''
                // '^/remove/api' : ''
                // 添加
                // '^/' : '/basepath/'
            },
         })
        ]
        },
        port: 80
    })
    // 监控文件修改
    watch('src/*.html', function () {
        console.log('你修改HTML文件了')
        server.reload()
    })
    watch('src/css/*.css', function () {
        console.log('你修改CSS文件了')
        server.reload()
    })
    watch('src/js/*.js', function () {
        console.log('你修改JS文件了')
        server.reload()
    })
})



//打包css任务
gulp.task('css', over => {
    gulp
        .src('./src/css/*.css')
        .pipe(cssmin())
        .pipe(rev())//去缓存
        .pipe(gulp.dest('dist/css'))
        //写入css 之后 将本次随即名保存起来
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/css'));

    over()
})
//安排任务 打包css 打包js等等
//打包 ：去空格 去注释 加随即名等等
//如果任务名是default运行时可以不写名称

//打包js任务
gulp.task('js', over => {
    gulp
        // .src(['./src/js/a.js', './src/js/b.js'])
        .src('./src/js/*.js')
        .pipe(babel({ "presets": ["env"] }))
        .pipe(uglify())
        .pipe(rev())//去缓存
        .pipe(gulp.dest('dist/js'))
        //写入js 之后 将本次随即名保存起来
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/js'));

    over()
})


//打包img任务
gulp.task('imgs', over => {
    gulp
        .src('./src/imgs/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/imgs'))

    over()
})

//打包html任务
gulp.task('html', over => {
    gulp
        .src(['temp/**/*.json', 'src/*.html'])
        .pipe(revCollector({
            replaceReved: true,
            dirReplacements: {
                // src路径: dist路径
                './js': './js',
                './css': './css',
            }
        }))
        .pipe(minifyhtml())
        .pipe(gulp.dest('dist'))

    over()
})

// gulp.task('a1', ()=>{
//     console.log('this is a1');
// })
// gulp.task('a2', ()=>{
//     console.log('this is a2');
// })
// // gulp.task('build', ()=>{
// //     console.log('this is build ok');
// // })

// //gulp.task(任务名，gulp.series/parallel(依赖任务，...依赖任务，任务处理函数))
// gulp.task('build', gulp.series('a1','a2',()=>{
//     console.log('ok');
// }))

//打包上线配置  =================================
gulp.task('build', gulp.series('js', 'css', 'imgs', 'html', () => {
    console.log('build ok'); //留心 js 、css等里面必须over
}))